<template>
  <div>
    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="健康档案封面" name="健康档案封面">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="健康档案编号："> {{ archiveCover.archiveNumber }}</el-descriptions-item>
          <el-descriptions-item label="建档单位：">{{ archiveCover.documentationUnitName }}</el-descriptions-item>
          <el-descriptions-item label="姓名：">{{ archiveCover.name }}</el-descriptions-item>
          <el-descriptions-item label="建档人：">
            <dict-tag :options="doctorDictLists" :value="archiveCover.documentationPeople" />
          </el-descriptions-item>
          <el-descriptions-item label="户籍地址：">
            {{ archiveCover.registeredResidence != null ? archiveCover.registeredResidence.fullAddress : "" }}
          </el-descriptions-item>
          <el-descriptions-item label="责任医生：">
            <dict-tag :options="doctorDictLists" :value="archiveCover.dutyDoctor" />
          </el-descriptions-item>
          <el-descriptions-item label="联系电话：">{{ archiveCover.personalPhone }}</el-descriptions-item>
          <el-descriptions-item label="建档日期：">{{ archiveCover.documentationTime }}</el-descriptions-item>
          <el-descriptions-item span="2" label="现住址：">
            {{ archiveCover.currentResidentialAddress != null ? archiveCover.currentResidentialAddress.fullAddress : ""
            }}
          </el-descriptions-item>
          <el-descriptions-item span="2" label="乡镇（街道）：">
            {{ archiveCover.currentResidentialAddress != null ? archiveCover.currentResidentialAddress.street : "" }}
          </el-descriptions-item>
          <el-descriptions-item span="2" label="村（居）委会：">
            {{ archiveCover.currentResidentialAddress != null ? archiveCover.currentResidentialAddress.committee : "" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="个人基本信息表" name="个人基本信息表">
        <el-descriptions :column="2" border title="基本信息">
          <el-descriptions-item label="姓名：">{{ basicInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="性别：">{{ basicInfo.gender == 0 ? "男" : "女" }}</el-descriptions-item>
          <el-descriptions-item label="出生日期：">{{ basicInfo.birthday }}</el-descriptions-item>
          <el-descriptions-item label="身份证号：">{{ basicInfo.idCard }}</el-descriptions-item>
          <el-descriptions-item label="工作单位：">
            {{ basicInfo.basicInfo != null ? basicInfo.basicInfo.workUnit : "" }}
          </el-descriptions-item>
          <el-descriptions-item label="本人电话：">{{ basicInfo.personalPhone }}</el-descriptions-item>
          <el-descriptions-item label="联系人姓名：">
            {{ basicInfo.contactPersonInfo != null && basicInfo.contactPersonInfo.length > 0 ? basicInfo.contactPersonInfo[0].name : ""
            }}
          </el-descriptions-item>
          <el-descriptions-item label="联系人电话：">
            {{ basicInfo.contactPersonInfo != null && basicInfo.contactPersonInfo.length > 0 ? basicInfo.contactPersonInfo[0].phone : ""
            }}
          </el-descriptions-item>
          <el-descriptions-item label="常住类型：">
            {{ basicInfo.basicInfo != null ? basicInfo.basicInfo.residentType : "" }}
          </el-descriptions-item>
          <el-descriptions-item label="民族：">{{ basicInfo.basicInfo != null ? basicInfo.basicInfo.nation : "" }}
          </el-descriptions-item>
          <el-descriptions-item label="血型：">{{ basicInfo.basicInfo != null ? basicInfo.basicInfo.bloodType : "" }}
          </el-descriptions-item>
          <el-descriptions-item label="文化程度：">
            {{ basicInfo.basicInfo != null ? basicInfo.basicInfo.educationalLevel : "" }}
          </el-descriptions-item>
          <el-descriptions-item label="职业：">{{ basicInfo.basicInfo != null ? basicInfo.basicInfo.occupation : "" }}
          </el-descriptions-item>
          <el-descriptions-item label="婚姻状况：">
            <dict-tag :options="bp_marital_status" :value="basicInfo.maritalStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="医疗费用支付方式：">
            {{ basicInfo.basicInfo != null ? basicInfo.basicInfo.medicalPaymentMethod : "" }}
          </el-descriptions-item>
          <el-descriptions-item label="暴露史：">{{ exposureHistory }}</el-descriptions-item>
          <el-descriptions-item span="2" label="药物过敏史：">{{ allergicHistory }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="2" border title="病历史">
          <el-descriptions-item label="既往史" span="2" label-class-name="my-label"></el-descriptions-item>
          <el-descriptions-item label="疾病史：">{{ diseaseHistory }}</el-descriptions-item>
          <el-descriptions-item label="手术史：">{{ surgeryHistory }}</el-descriptions-item>
          <el-descriptions-item label="外伤史：">{{ externalInjuryHistory }}</el-descriptions-item>
          <el-descriptions-item label="输血史：">{{ transfusionHistory }}</el-descriptions-item>
          <el-descriptions-item label="家族史" span="2" label-class-name="my-label"></el-descriptions-item>
          <el-descriptions-item label="家族史（父亲）：">{{ fatherValueArr }}</el-descriptions-item>
          <el-descriptions-item label="家族史（母亲）：">{{ motherValueArr }}</el-descriptions-item>
          <el-descriptions-item label="家族史（兄弟姐妹）">{{ brotherValueArr }}</el-descriptions-item>
          <el-descriptions-item label="家族史（子女）：">{{ childValueArr }}</el-descriptions-item>
          <el-descriptions-item label="其他" span="2" label-class-name="my-label"></el-descriptions-item>
          <el-descriptions-item label="遗传病史：">{{ geneticHistory }}</el-descriptions-item>
          <el-descriptions-item label="残疾情况：">{{ disabilityHistory }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="2" title="生活环境" border>
          <el-descriptions-item label="厨房排风设施：">{{ kitchenFacilities }}</el-descriptions-item>
          <el-descriptions-item label="燃料类型：">{{ fuelType }}</el-descriptions-item>
          <el-descriptions-item label="厕所：">{{ toilet }}</el-descriptions-item>
          <el-descriptions-item label="禽畜栏：">{{ poultryFarm }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="健康体检" name="健康体检">
        <el-table :data="healthCheckUpsData" style="width: 100%">
          <el-table-column label="序号">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="体检日期">
          </el-table-column>
          <el-table-column prop="data.healthExaminationType" label="体检类型">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="高血压随访" name="高血压随访">
        <el-table :data="hypertensionFollowupData" style="width: 100%">
          <el-table-column label="序号">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="随访日期">
          </el-table-column>
          <el-table-column prop="data.followupMethod" label="随访类型">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="糖尿病随访" name="糖尿病随访">
        <el-table :data="diabetesFollowupData" style="width: 100%">
          <el-table-column label="序号">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="随访日期">
          </el-table-column>
          <el-table-column prop="data.followupMethod" label="随访类型">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="中医体质辨识" name="中医体质辨识">
        <el-table :data="tcmConstitutionIdentificationData" style="width: 100%">
          <el-table-column label="序号">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="辨识日期">
          </el-table-column>
          <el-table-column prop="data.result" label="辨识结果">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- Add your content here -->
  </div>
</template>

<script setup>
// export default {
//   name: "HealthRecord",
//   data() {
//     return {
//       activeTab: '健康档案封面',
//     }
//   },
//   methods: {
//     handleClick() {
//
//     },
//   }
// }
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import {
  getPatientInfo,
  getBasicInfo,
  getHealthCheckUps,
  getHypertensionFollowup, getDiabetesFollowup, getTcmConstitutionIdentification
} from "@/api/basicPublic/patientInfo";
import { listUser } from "@/api/system/user";

const route = useRoute();
const activeTab = ref("健康档案封面");
const { proxy } = getCurrentInstance();
const {
  bp_marital_status
} = toRefs(proxy?.useDict("bp_marital_status"));


const archiveCover = ref({});

async function getArchiveCover() {
  const id = route.query.id;
  const res = await getPatientInfo(id);
  archiveCover.value = res.data || {};
}

const basicInfo = ref({
  basicInfo: {
    pastHistory: {
      exposureHistory: {},
      allergicHistory: {},
      diseaseHistory: {},
      surgeryHistory: {},
      externalInjuryHistory: {},
      transfusionHistory: {},
      familyHistory: {},
      geneticHistory: {},
      disabilityHistory: {}
    }
  },
  contactPersonInfo: []
});

const occupations = ref([
  { id: "1", name: "国家机关、党群组织、企业、事业单位负责人" },
  { id: "2", name: "专业技术人员" },
  { id: "3", name: "办事人员和有关人员" },
  { id: "4", name: "商业、服务人员" },
  { id: "5", name: "农、林、牧、渔、水利业生产人员" },
  { id: "6", name: "生产、运输设备操作人员及有关人员" },
  { id: "7", name: "军人" },
  { id: "8", name: "不便分类的其他从业人员" },
  { id: "9", name: "无职业" }
]);

const exposureHistory = ref("");
const allergicHistory = ref("");
const diseaseHistory = ref("");
const surgeryHistory = ref("");
const externalInjuryHistory = ref("");
const transfusionHistory = ref("");
const fatherValueArr = ref("");
const motherValueArr = ref("");
const brotherValueArr = ref("");
const childValueArr = ref("");
const geneticHistory = ref("");
const disabilityHistory = ref("");
const kitchenFacilities = ref("");
const fuelType = ref("");
const drinkWater = ref("");
const toilet = ref("");
const poultryFarm = ref("");

async function getPatientBasicInfo() {
  const id = route.query.id;
  const res = await getBasicInfo(id);
  basicInfo.value = res.data || {};
  if (basicInfo.value.basicInfo) {
    occupations.value.forEach(item => {
      if (item.id === basicInfo.value.basicInfo.occupation) {
        basicInfo.value.basicInfo.occupation = item.name;
      }
    });
    const pastHistory = basicInfo.value.basicInfo.pastHistory;
    if (pastHistory.exposureHistory.optionValue.length > 0) {
      exposureHistory.value = pastHistory.exposureHistory.optionValue.join("、");
    } else {
      exposureHistory.value = "无";
    }


    const allergicHistory1 = [...pastHistory.allergicHistory.optionValue, ...pastHistory.allergicHistory.modelValue];
    if (allergicHistory1.length > 0) {
      allergicHistory.value = allergicHistory1.join("、");
    } else {
      allergicHistory.value = "无";
    }
    // 疾病史
    let diseaseHistory1 = [];
    if (pastHistory.diseaseHistory.diseaseHistoryLists.length > 0) {
      pastHistory.diseaseHistory.diseaseHistoryLists.forEach(item => {
        diseaseHistory1.push(item.name);
      });
    }
    diseaseHistory1 = [...pastHistory.diseaseHistory.optionValue, ...diseaseHistory1];
    if (diseaseHistory1.length > 0) {
      diseaseHistory.value = diseaseHistory1.join("、");
    } else {
      diseaseHistory.value = "无";
    }

    // 手术史
    if (pastHistory.surgeryHistory) {
      if (pastHistory.surgeryHistory.modelValue.length > 0) {
        let surgeryHistory1 = [];
        pastHistory.surgeryHistory.modelValue.forEach(item => {
          surgeryHistory1.push(item.name);
        });
        surgeryHistory.value = surgeryHistory1.join("、");
      }
    } else {
      surgeryHistory.value = "无";
    }


    // 外伤史

    if (pastHistory.externalInjuryHistory.modelValue.length > 0) {
      let externalInjuryHistory1 = [];
      pastHistory.externalInjuryHistory.modelValue.forEach(item => {
        externalInjuryHistory1.push(item.name);
      });
      externalInjuryHistory.value = externalInjuryHistory1.join("、");
    } else {
      externalInjuryHistory.value = "无";
    }


    // 输血史
    if (pastHistory.transfusionHistory.modelValue.length > 0) {
      let transfusionHistory1 = [];
      pastHistory.transfusionHistory.modelValue.forEach(item => {
        transfusionHistory1.push(item.name);
      });
      transfusionHistory.value = transfusionHistory1.join("、");
    } else {
      transfusionHistory.value = "无";
    }


    // 家族史
    if (pastHistory.familyHistory.fatherValueArr.length > 0) {
      fatherValueArr.value = pastHistory.familyHistory.fatherValueArr.join("、");
    } else {
      fatherValueArr.value = "无";
    }

    if (pastHistory.familyHistory.motherValueArr.length > 0) {
      motherValueArr.value = pastHistory.familyHistory.motherValueArr.join("、");
    } else {
      motherValueArr.value = "无";
    }

    if (pastHistory.familyHistory.brotherValueArr.length > 0) {
      brotherValueArr.value = pastHistory.familyHistory.brotherValueArr.join("、");
    } else {
      brotherValueArr.value = "无";
    }

    if (pastHistory.familyHistory.childValueArr.length > 0) {
      childValueArr.value = pastHistory.familyHistory.childValueArr.join("、");
    } else {
      childValueArr.value = "无";
    }

    // 遗传病史
    if (pastHistory.geneticHistory.modelValue.length > 0) {
      geneticHistory.value = pastHistory.geneticHistory.modelValue.join("、");
    } else {
      geneticHistory.value = "无";
    }

    // 残疾史
    if (pastHistory.disabilityHistory.optionValue.length > 0) {
      disabilityHistory.value = pastHistory.disabilityHistory.optionValue.join("、");
    } else {
      disabilityHistory.value = "无";
    }

    kitchenFacilities.value = pastHistory.kitchenFacilities;
    fuelType.value = pastHistory.fuelType;
    drinkWater.value = pastHistory.drinkWater;
    toilet.value = pastHistory.toilet;
    poultryFarm.value = pastHistory.poultryFarm;
  }
}


const healthCheckUpsData = ref([
  {
    data: { healthExaminationType: "" }
  }
]);

async function getHealthCheckUpsData() {
  const id = route.query.id;
  const res = await getHealthCheckUps(id);
  healthCheckUpsData.value = res.data || [];
  healthCheckUpsData.value.forEach(item => {
    if (item.data.healthExaminationType === "0") {
      item.data.healthExaminationType = "常规体检";
    }
    if (item.data.healthExaminationType === "1") {
      item.data.healthExaminationType = "慢病体检";
    }
    if (item.data.healthExaminationType === "2") {
      item.data.healthExaminationType = "老年人体检";
    }
  });
}

const hypertensionFollowupData = ref([])
async function getHypertensionFollowupData(){
  const id = route.query.id;
  const res = await getHypertensionFollowup(id);
  hypertensionFollowupData.value = res.data || [];
  hypertensionFollowupData.value.forEach(item => {
    if (item.data.followupMethod === "0") {
      item.data.followupMethod = "门诊";
    }
    if (item.data.followupMethod === "1") {
      item.data.followupMethod = "家庭";
    }
    if (item.data.followupMethod === "2") {
      item.data.followupMethod = "电话";
    }
  });
}

const diabetesFollowupData = ref([]);
async function getDiabetesFollowupData(){
  const id = route.query.id;
  const res = await getDiabetesFollowup(id);
  diabetesFollowupData.value = res.data || [];
  diabetesFollowupData.value.forEach(item => {
    if (item.data.followupMethod === "0") {
      item.data.followupMethod = "门诊";
    }
    if (item.data.followupMethod === "1") {
      item.data.followupMethod = "家庭";
    }
    if (item.data.followupMethod === "2") {
      item.data.followupMethod = "电话";
    }
  });
}

const tcmConstitutionIdentificationData = ref([]);
async function getTcmConstitutionIdentificationData(){
  const id = route.query.id;
  const res = await getTcmConstitutionIdentification(id);
  tcmConstitutionIdentificationData.value = res.data || [];
  tcmConstitutionIdentificationData.value.forEach(item => {
    item.data.result = item.data.result.join("、");
  });
}


const handleClick = (tab) => {
  if (tab.props.name === "个人基本信息表") {
    getPatientBasicInfo();
  }
  if (tab.props.name === "健康体检") {
    getHealthCheckUpsData();
  }
  if (tab.props.name === "高血压随访") {
    getHypertensionFollowupData();
  }
  if (tab.props.name === "糖尿病随访") {
    getDiabetesFollowupData();
  }
  if (tab.props.name === "中医体质辨识") {
    getTcmConstitutionIdentificationData();
  }
};

const doctorDictList = ref([]);
const doctorDictLists = ref([]);
const getDoctorDictList = async () => {
  const res = await listUser();
  doctorDictList.value = res.rows;
  doctorDictLists.value = doctorDictList.value.map(it => ({
    elTagClass: "",
    elTagType: "",
    label: it.nickName,
    value: String(it.userId)
  }));
};

onMounted(() => {
  getArchiveCover();
  getDoctorDictList();
});
</script>

<style>
.my-label {
  font-weight: 700 !important;
  border-right: none !important;
  background-color: #fff !important;
}
</style>
